import React, { PropsWithChildren, ReactElement, useEffect, useState } from "react";
import { evaluationDiffUuidsStorage } from "@/utils/storage";
import { Badge, BadgeProps } from "antd";
import { useMemoizedFn } from "ahooks";
import { palabora } from "@/utils";

export default function AddDiffBtn(props: PropsWithChildren<{
  evaluationUuid?: string
  evaluationComposeUuid?: string;
  eqUuid?: string;
  badgeProps?: BadgeProps
}>) {
  const [hasAdd, setHasAdd] = useState<boolean>(false);

  const refresh = useMemoizedFn(() => {
    if (props.evaluationUuid) {
      setHasAdd(evaluationDiffUuidsStorage.get()?.evaluationUuids?.includes(props.evaluationUuid) ?? false)
    }
    if (props.evaluationComposeUuid) {
      setHasAdd(evaluationDiffUuidsStorage.get()?.evaluationComposeUuids?.includes(props.evaluationComposeUuid) ?? false)
    }
    if (props.eqUuid) {
      setHasAdd(evaluationDiffUuidsStorage.get()?.eqUuids?.includes(props.eqUuid) ?? false)
    }
  })

  useEffect(() => {
    refresh();

    const listener = (e: MessageEvent<{ type: string }>) => {
      if (e.data?.type === "evaluationDiffChangeByDiffBtn") {
        refresh();
      }
    }
    window.addEventListener('message', listener)
    return () => {
      window.removeEventListener('message', listener);
    }
  }, []);


  return <Badge {...props.badgeProps} dot={hasAdd}>
    <div className="inline-block" onClick={async (e) => {
      e.stopPropagation();
      e.preventDefault();

      const currentAnimation = () => {
        return palabora(e.target as HTMLElement, document.querySelector('#diff-btn')!);
      };

      const evaluationDiffUuids = evaluationDiffUuidsStorage.get()
      if (evaluationDiffUuids) {
        if (props.evaluationUuid) {
          if (!evaluationDiffUuids.evaluationUuids.includes(props.evaluationUuid)) {
            evaluationDiffUuids.evaluationUuids.push(props.evaluationUuid);
            evaluationDiffUuidsStorage.set({
              evaluationUuids: evaluationDiffUuids.evaluationUuids,
              evaluationComposeUuids: evaluationDiffUuids.evaluationComposeUuids,
              eqUuids: evaluationDiffUuids.eqUuids,
            });
            setHasAdd(true);
            await currentAnimation();
          } else {
            evaluationDiffUuidsStorage.set({
              evaluationUuids: evaluationDiffUuids.evaluationUuids.filter(item => item !== props.evaluationUuid),
              evaluationComposeUuids: evaluationDiffUuids.evaluationComposeUuids,
              eqUuids: evaluationDiffUuids.eqUuids,
            });
            setHasAdd(false);
          }
        }

        if (props.evaluationComposeUuid) {
          if (!evaluationDiffUuids.evaluationComposeUuids.includes(props.evaluationComposeUuid)) {
            evaluationDiffUuids.evaluationComposeUuids.push(props.evaluationComposeUuid);
            evaluationDiffUuidsStorage.set({
              evaluationUuids: evaluationDiffUuids.evaluationUuids,
              evaluationComposeUuids: evaluationDiffUuids.evaluationComposeUuids,
              eqUuids: evaluationDiffUuids.eqUuids,
            });
            setHasAdd(true);
            await currentAnimation();
          } else {
            evaluationDiffUuidsStorage.set({
              evaluationUuids: evaluationDiffUuids.evaluationUuids,
              evaluationComposeUuids: evaluationDiffUuids.evaluationComposeUuids.filter(item => item !== props.evaluationComposeUuid),
              eqUuids: evaluationDiffUuids.eqUuids,
            });
            setHasAdd(false);
          }
        }

        if (props.eqUuid) {
          if (!evaluationDiffUuids.eqUuids.includes(props.eqUuid)) {
            evaluationDiffUuids.eqUuids.push(props.eqUuid);
            evaluationDiffUuidsStorage.set({
              evaluationUuids: evaluationDiffUuids.evaluationUuids,
              evaluationComposeUuids: evaluationDiffUuids.evaluationComposeUuids,
              eqUuids: evaluationDiffUuids.eqUuids,
            });
            setHasAdd(true);
            await currentAnimation();
          } else {
            evaluationDiffUuidsStorage.set({
              evaluationUuids: evaluationDiffUuids.evaluationUuids,
              evaluationComposeUuids: evaluationDiffUuids.evaluationComposeUuids,
              eqUuids: evaluationDiffUuids.eqUuids.filter(item => item !== props.eqUuid),
            });
            setHasAdd(false);
          }
        }


      } else {
        if (props.evaluationUuid) {
          evaluationDiffUuidsStorage.set({
            evaluationUuids: [props.evaluationUuid],
            evaluationComposeUuids: [],
            eqUuids: [],
          });
        }

        if (props.evaluationComposeUuid) {
          evaluationDiffUuidsStorage.set({
            evaluationUuids: [],
            evaluationComposeUuids: [props.evaluationComposeUuid],
            eqUuids: [],
          });
        }

        if (props.eqUuid) {
          evaluationDiffUuidsStorage.set({
            evaluationUuids: [],
            evaluationComposeUuids: [],
            eqUuids: [props.eqUuid],
          });
        }

        setHasAdd(true);
        await currentAnimation();
      }

      postMessage({
        type: 'evaluationDiffChangeByAddDiffBtn'
      })
    }}>
      {props.children}

    </div>
  </Badge>
}
